<!doctype html>

<html>
  <head>
    <meta charset="utf-8" />
    <title>kp-atomix</title>
    <link href="atomix.css" rel="stylesheet" type="text/css" />

    <script>
       window.onload = function () {
           KP_ATOMIX.init();
       }
       window.onunload = function(){}
    </script>

  </head>
  <body>

<!-- start headbar -->
<div id="headbar">

  <a href="index.html">Home</a>
  &nbsp;&nbsp;
  <a href="about.html">About</a>

  &nbsp;&nbsp;&nbsp;
  Solutions for:
    <a href="solutions/katomic.html" id="show-solutions-katomic">katomic</a>&nbsp;
    <a href="solutions/original.html" id="show-solutions-original">original</a>&nbsp;
    <a href="solutions/pack1.html" id="show-solutions-pack1">pack1</a>&nbsp;
    <a href="solutions/mystery.html" id="show-solutions-mystery">mystery</a>

</div>
<!-- end headbar -->

    <!-- start contents -->

    <form>

      <div class="center" id="controls">

        <div id="selectors">

        <p>

          <span id="levelset-selector-span"></span>
          <span id="level-selector-span"></span>
        </p>
        <p>

          &nbsp;&nbsp;&nbsp;
          <a href="#" id="prev-level">Prev Level</a>

          &nbsp;&nbsp;&nbsp;

          <a href="#" id="next-level">Next Level</a>

          &nbsp;&nbsp;&nbsp;
          <a href="#" id="history-reset">Reset Level</a>

          &nbsp;&nbsp;&nbsp;
          <a href="#" id="bookmark-link" title="Bookmark This Link To Save Level">Save Level</a>
        </p>

        </div>
      </div>
    </form>

    <hr />

    <div id="loading">
      Atomix is loading ...
      <noscript><br />... sorry, &nbsp;javascript is disabled so you can't play :-(</noscript>
      <hr />

    </div>

    <table ><tr>

      <td class="arena-border">
        <div id="arena-container">
          <div id="arena"></div>
          <div id="move-controls"  >
            <a href="#" id="history-undo">Undo</a>
              &nbsp;&nbsp;&nbsp;

            <span id="move-no">&nbsp;</span>
              &nbsp;&nbsp;&nbsp;
            <a href="#" id="history-redo">Redo</a>
          </div>
        </div>
      </td>

      <td >
        <div id="molecule-container">

          <div id="molecule"></div>
        </div>
      </td>


    </tr></table>


    <!-- end contents -->

    <!-- start after-main-->

    <div id="after-main">

<hr />
<div id="levelset-credits">
  LevelSet: <span id="levelset-credits-name">&nbsp;</span>
    &nbsp;&nbsp;
  Credits: <span id="levelset-credits-credit">&nbsp;</span>
    &nbsp;&nbsp;
  License: <span id="levelset-credits-license">&nbsp;</span>

</div>

        <!-- start footer -->

<div class="center" id="footer">

  <hr />

  <a href="http://code.google.com/p/kp-atomix/downloads/list">kp-atomix</a>,
  a free javascript version of the
  <a href="http://kde.org/"> kde</a>
  game
  <a href="http://games.kde.org/game.php?game=katomic">

    katomic
  </a>

  <br />
  Inspired by
  <a href="http://cross-browser.com/forums/viewtopic.php?id=803">Cross-Browser.com</a>

</div>

        <!-- end footer -->

    </div>
    <!-- end after-main -->


<!-- start dialogs -->

    <div id="success-dialog">

      <h4>Well Done!</h4>

      <form id="success-dialog-form">

          <p id="success-dialog-message">&nbsp;</p>
          <p>
             <b>Please Enter Your</b><br />
             <b>Name or Nickname</b>

             <br />
             <input type="text" value='My Nick Name' class="center" id="success-dialog-user" />
          </p>

          <p class="buttons">
            <input id="success-dialog-button-close" type="button" value="Close" />
            <input
                   style="display:none"
                   id="success-dialog-button-save"
                   type="button" value="Submit"
            />
          </p>

      </form>

    </div>

     <div id="ajax-dialog">

      <h4 id='ajax-dialog-title'>Submiting Solution</h4>

      <form id="ajax-dialog-form">

          <div id="ajax-dialog-message"><p>Waiting for reply from server ...</p></div>

          <p class="buttons">
            <input id="ajax-dialog-button-close" type="button" value="Close" />
          </p>

      </form>

    </div>

    <div id="bookmark-dialog">

      <h4>Bookmark This Level</h4>

      <form id="bookmark-dialog-form">

        <p><a id="bookmark-dialog-link">&nbsp;</a></p>

          <p id="bookmark-dialog-message">
            <b>Save this level by<br />bookmarking the above link.</b>
            <br /><br />
            <b>Either:</b> right click the link and choose the
            'bookmark link' option from the menu.
            <br /><br />

            <b>Or:</b> click on the link and then bookmark the page.
          </p>

          <p class="buttons">
            <input id="bookmark-dialog-button-close" type="button" value="Close" />
          </p>

      </form>
    </div>

<!-- end dialogs -->
   <!-- start tail_scripts -->
<script src="js/atomix.js"></script>
<script src="levels/katomic.js"></script>
<script src="levels/original.js"></script>
<script src="levels/pack1.js"></script>
<script src="levels/mystery.js"></script>
    <!-- end tail scripts -->

  </body>

</html>
